<form method="post" action="<?php echo Url::generate($this->context->uri['module'], 'Do' . $this->context->uri['action']) ?>">
<fieldset>
<legend>显示文字</legend>
  <div>
    <label>属性中文名</label>
    <input name="caption" type="text" />
    <span class="tips">（会显示在页面上给最终用户阅读）</span>
  </div>
  <div>
    <label>填写者提示</label>
    <textarea name="tips_for_writer" rows="4"></textarea>
    <span class="tips">（给填写表单的人看的说明）</span>
  </div>
  <div>
    <label>阅读者提示</label>
    <textarea name="tips_for_reader" rows="4"></textarea>
    <span class="tips">（给阅读者看的说明）</span>
  </div>
</fieldset>
<fieldset>
<legend>表单元素</legend>
  <div>
    <label>表单元素类型</label>
    <select name="form_item_type" onchange="onFormItemTypeChange(this.value)">
      <option value="">选择表单元素类型</option>
      <option value="radio">单选框</option>
      <option value="select">单选下拉菜单</option>
      <option value="checkbox">复选框</option>
      <option value="multiple_select">复选下拉菜单</option>
      <option value="single_input">单行文本框</option>
      <option value="textarea">多行文本框</option>
    </select>
    <span class="tips"></span>
  </div>
  <div id="field_options" class="doNotDisplay">
    <label>选项</label>
    <table><tr><td>
			连续添加<input type="text" name="loop_times" size="3" value="1" />个选项
      <input type="button" value="添加选项" class="submit" onclick="addOptionRows(this.form.loop_times.value, this.form.form_item_type.value);" />
      <div id="optionsDG">
        <div id="row-template" class="row">
          <div class="column">
            <button class="submit" onclick="delOption(--placeholder:id--)">删除</button>
          </div>
          <div class="column">
                               显示文字
            <!--option_text-->
            <!--option_text-->
          </div>
          <div class="column">
            <!--default_checked-->
            <!--default_checked-->默认选中
          </div>
          <div class="column">
                                选项索引
            <!--option_index-->
            <!--option_index-->
          </div>
        </div>
      </div>
    </td></tr></table>
  </div>
  <div id="field_default_text" class="doNotDisplay">
    <label>默认填写</label>
    <textarea name="default_text"></textarea>
    <span class="tips"></span>
  </div>
</fieldset>
<fieldset>
<legend>验证规则</legend>
  <div>
    <label>是否必填项</label>
    <input name="validator_conf[rules][required]" type="radio" value="1" />是必填项
    <input name="validator_conf[rules][required]" type="radio" value="0" checked="checked" />不是必填项
          出错提示<input name="validator_conf[explain][required]" type="text" size="24" />
    <span class="tips"></span>
  </div>
  <div id="field_validator_conf_selected_limitation" class="doNotDisplay">
    <label>选项数限制</label>
    <table>
		  <tbody>
		    <tr>
		      <td></td>
		      <td>规则内容</td>
		      <td>出错提示</td>
		    </tr>
		    <tr>
		      <td>最少要选</td>
		      <td><input name="validator_conf[rules][min_selected]" type="text">项</td>
		      <td><input name="validator_conf[explain][min_selected]" size="24" type="text"></td>
		    </tr>
		    <tr>
		      <td>最多可选</td>
		      <td><input name="validator_conf[rules][max_selected]" type="text">项</td>
		      <td><input name="validator_conf[explain][max_selected]" size="24" type="text"></td>
		    </tr>
		  </tbody>
		</table>
  </div>
  <div id="field_validator_conf" class="doNotDisplay">
    <label>文本验证规则</label>
		<table>
		  <tbody>
		    <tr>
		      <td></td>
		      <td>规则内容</td>
		      <td>出错提示</td>
		    </tr>
		    <tr>
		      <td>最小取值</td>
		      <td><input name="validator_conf[rules][min_value]" type="text"></td>
		      <td><input name="validator_conf[explain][min_value]" size="24" type="text"></td>
		    </tr>
		    <tr>
		      <td>最大取值</td>
		      <td><input name="validator_conf[rules][max_value]" type="text"></td>
		      <td><input name="validator_conf[explain][max_value]" size="24" type="text"></td>
		    </tr>
		    <tr>
		      <td>最短</td>
		      <td><input name="validator_conf[rules][min_length]" type="text">个字</td>
		      <td><input name="validator_conf[explain][min_length]" size="24" type="text"></td>
		    </tr>
		    <tr>
		      <td>最长</td>
		      <td><input name="validator_conf[rules][max_length]" type="text">个字</td>
		      <td><input name="validator_conf[explain][max_length]" size="24" type="text"></td>
		    </tr>
		    <tr>
		      <td>输入掩码</td>
		      <td><input name="validator_conf[rules][mask]" type="text">（用户必须按此正则表达式描述的格式输入）</td>
		      <td><input name="validator_conf[explain][mask]" size="24" type="text"></td>
		    </tr>
		    <tr>
		      <td>禁止字串</td>
		      <td><input name="validator_conf[rules][ban]" type="text">（用户输入不能包含此正则表达式描述的字串）</td>
		      <td><input name="validator_conf[explain][ban]" size="24" type="text"></td>
		    </tr>
		  </tbody>
		</table>
  </div>
</fieldset>
<fieldset>
<legend>其它高级选项</legend>
  <div id="field_filterable" class="doNotDisplay">
    <label>是否可筛选</label>
    <input name="filterable" type="radio" value="1" />可筛选
    <input name="filterable" type="radio" value="0" checked="checked" />不可筛选
    <span class="tips">（如果设置了可筛选，则这个属性会出现在搜索条件中）</span>
  </div>
  <div>
    <label>属性变量名</label>
    <input name="name" type="text" />
    <span class="tips">（用于程序识别，不会显示在页面上，可以是拼音或者英文，每个属性的名字是唯一的）</span>
  </div>
  <div>
    <label>显示顺序</label>
    <input name="display_order" type="text" value="100" />
    <span class="tips">（数字越小越靠前）</span>
  </div>
</fieldset>
  <div>
  	<label></label>
  	<input type="submit" class="submit" value="保存" />
  </div>
</form>

<script type="text/javascript">
var optionsDataGrid = new DataGrid('optionsDG');
function addOptionRows(loopTimes, formItemType)
{
	for(i=0; i<loopTimes; i++)
	{
		addOption(formItemType);
	}
}
function addOption(formItemType)
{
    var newId = Math.random();
    boxType = 'radio' == formItemType || 'select' == formItemType ? 'radio' : 'checkbox';
    newOption =
    {
        id: newId,
        option_text: '<input name="options['+newId+'][option_text]" type="text" size="16"/>',
        default_checked: '<input name="default_checked[]" type="'+boxType+'" value="'+newId+'"/>',
        option_index: '<input name="options['+newId+'][option_index]" type="text" size="4"/>'
    };
    optionsDataGrid.addRow(newOption,'Bottom');     
}
function delOption(id)
{
    optionsDataGrid.delRow(id);
}

function onFormItemTypeChange(formItemType)
{
  switch(formItemType)
  {
    case "radio":
    case "select":
      document.getElementById('field_options').style.display="block";
      document.getElementById('field_validator_conf_selected_limitation').style.display="none";
      document.getElementById('field_default_text').style.display="none";
      document.getElementById('field_validator_conf').style.display="none";
      document.getElementById('field_filterable').style.display="block";
      break;
    case "checkbox":
    case "multiple_select":
      document.getElementById('field_options').style.display="block";
      document.getElementById('field_validator_conf_selected_limitation').style.display="block";
      document.getElementById('field_default_text').style.display="none";
      document.getElementById('field_validator_conf').style.display="none";
      document.getElementById('field_filterable').style.display="block";
      break;
    case "single_input":
    case "textarea":
      document.getElementById('field_options').style.display="none";
      document.getElementById('field_validator_conf_selected_limitation').style.display="none";
      document.getElementById('field_default_text').style.display="block";
      document.getElementById('field_validator_conf').style.display="block";
      document.getElementById('field_filterable').style.display="none";
      break;     
  }
}
</script>